<template>
  <div id="search-page">
    <title-bar>
      <h2 slot="left" @click="goBack">
        <van-icon name="arrow-left" color='#fff' 
      
        />
      </h2>
      <h2 slot="center">搜索</h2>
    </title-bar>
    <search-box @historyChange="getData"></search-box>
    <!-- <span>历史搜索</span>
    <van-icon name="clear" color='#ccc'/> -->
    <ul>
      <li v-for="(item,index) in historyList" :key="index">{{item}}</li>
    </ul>
  </div>
</template>

<script>

import TitleBar from '../components/common/title_bar/TitleBar.vue'
import Vue from 'vue';
import { Icon } from 'vant';
import 'vant/lib/icon/style'
import SearchBox from '../components/SearchChildrenComponents/SearchBox.vue';

Vue.use(Icon);
export default {
  name:"SearchPage",
  data() {
    return {
      historyList:[]
    }
  },
  components:{
    TitleBar,
    SearchBox
  },
  methods: {
    goBack(){
      this.$emit("gohome")
    },
    getData(v){
      this.historyList.push(v)
      this.historyList=[...new Set(this.historyList)]
    }
  },
  created() {
    var arr = localStorage.getItem('historyData')
    if(arr==null){
      localStorage.setItem('historyData',JSON.stringify([]))
    }else{
      this.historyList=JSON.parse(arr)
    }
  },
}
    
</script>

<style scoped>
  h2{
    font-weight: normal;
  }
  #search-page /deep/.van-search__content {
    background-color: #fff;
  }
  span{
    display: inline-block;
    padding: 9px 9px;
    font-size: 18px;
    color: #343434;
  }
  .van-icon-clear:before{
    margin-left: 252px;
  }
</style>